<template>
  <div>
      <div class="top">
        <div class="seat"></div>
        <!-- <div class="search">
            <input type="text" placeholder="休闲服装">
        </div> -->
        <Top></Top>
        <Nav></Nav>
      </div>
      <div class="main">
 <div class="smallCircle">
          <div class="left">
              <img src="/pinxiaoquan.png">
              <b>拼小圈</b>
          </div>
          <div class="right">
              <span>有新提醒</span>
              <em>11</em>
              <i>&gt;</i>
          </div>
      </div>
      <Division></Division>
      <router-view></router-view>
        <List></List>
      <Division></Division>
      <div class="buy">
          <div>
              <img src="/8ca32c7c0aa69a574d7e404e88ddec6_03.gif">
              <b>多多卖菜</b>
              <span>次日自提</span>
          </div>
          <BuyList></BuyList>
      </div>
      <Division></Division>
      <div class="Shoe">
          <div>
              <img src="/8ca32c7c0aa69a574d7e404e88ddec6_06.gif">
              <b>百亿补贴</b>
              <span>大牌正品</span>
          </div>
          <ShopList></ShopList>
      </div>
      <Division></Division>
      <GoodsList></GoodsList>
      </div>
             <Bb></Bb>
  </div>
</template>

<script>
import Nav from "@/components/home/nav.vue"
import Top from "@/components/top.vue"
import Division from "@/components/home/division.vue"
import List from "@/components/home/list.vue"
import BuyList from "@/components/home/buy-list.vue"
import ShopList from "@/components/home/shop-list.vue"
import GoodsList from "@/components/home/goodsList.vue"
export default {
    components:{
        Top,
        Nav,
        Division,
        List,
        BuyList,
        ShopList,
        GoodsList
    }
}
</script>

<style scoped>
    .top{
        width:100vw;
        background-color: #fff;
        z-index: 1;
        height: 1rem;
    }
    .main{
        flex:1;
        overflow: scroll;
    }
    .seat{
        /* width: 4rem; */
        height: 0.1rem;
    }
    .smallCircle{
        width:4rem;
        height: 0.76rem;
        margin: 0 auto 0;
        display: flex;
        justify-content: space-between;
    }
    .smallCircle div{
        display: flex;
        align-items: center;
    }
    .smallCircle .left{
        font-size:0.18rem;
    }
    .smallCircle .left img{
        margin-right:0.08rem;
    }
    .smallCircle .right span{
        color:#c0c0c0;
    }
    .smallCircle .right em{
        display: block;
        width:0.2rem;
        height: 0.2rem;
        background-color: #e32f26;
        border-radius: 50%;
        color:white;
        font-size: 0.1rem;
        text-align: center;
        line-height: 0.2rem;
        margin:0 0.06rem 0 0.05rem;
    }
    .smallCircle .right i{
        color:#c0c0c0;
    }
    .buy{
        display: flex;
        width: 4rem;
        margin:0.08rem auto;
    }
    .buy div:first-of-type{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:0.72rem;
        flex-shrink: 0;
    }
    .buy div:first-of-type b{
        font-size: 0.14rem;
        font-weight: bold;
    }
    .buy div:first-of-type span{
        font-size: 0.13rem;
        color: #a3a3a3;
    }
    .Shoe{
        display: flex;
        width: 4rem;
        margin:0.08rem auto;
    }
    .Shoe div:first-of-type{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:0.72rem;
        flex-shrink: 0;
    }
    .Shoe div:first-of-type b{
        font-size: 0.14rem;
        font-weight: bold;
    }
    .Shoe div:first-of-type span{
        font-size: 0.13rem;
        color: #a3a3a3;
    }
</style>